<template>
    <div class="box">
        <div class="box-header">
            <img v-show="activeTab == 'one'" src="@/assets/large-screen/title/on-one.png" />
            <img v-show="activeTab == 'two'" src="@/assets/large-screen/title/on-two.png" />
            <span :class="['box-header-title1', activeTab == 'one' ? 'on' : '']" @click="onTab('one')">人员数量</span>
            <span :class="['box-header-title2', activeTab == 'two' ? 'on' : '']" @click="onTab('two')">寄递物品数量</span>
        </div>
        <div class="box-content">
            <div v-if="activeTab == 'one'" class="box-content-person">
                <PersonGoodsLineChart :data="chartData" height="210px" title="单位：人"></PersonGoodsLineChart>
            </div>
            <div v-if="activeTab == 'two'" class="box-content-goods">
                <div class="box-tabs">
                    <span :class="subTab == 'mail' ? 'on' : ''" @click="onSubTab('mail')">邮件</span>
                    <span :class="subTab == 'fast' ? 'on' : ''" @click="onSubTab('fast')">快件</span>
                    <span :class="subTab == 'business' ? 'on' : ''" @click="onSubTab('business')">跨境电商</span>
                </div>
                <PersonGoodsLineChart v-if="subTab == 'mail'" :data="chartData" height="170px" title="单位：件"></PersonGoodsLineChart>
                <PersonGoodsLineChart v-if="subTab == 'fast'" :data="chartData" height="170px" title="单位：件"></PersonGoodsLineChart>
                <PersonGoodsLineChart v-if="subTab == 'business'" :data="chartData" height="170px" title="单位：件"></PersonGoodsLineChart>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PersonGoodsLineChart from './PersonGoodsLineChart.vue'
const activeTab = ref('one')
const subTab = ref('mail')

const chartData = {
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  series: [
    {
      name: '入境',
      data: [150, 240, 450, 480, 500, 580, 530, 610, 720, 300, 590, 310]
    },
    {
      name: '出境',
      data: [460, 400, 300, 260, 270, 320, 350, 400, 470, 490, 480, 470]
    },
    {
      name: '出岛',
      data: [300, 400, 560, 580, 570, 460, 430, 390, 220, 200, 230, 260]
    }
  ]
}


function onTab(tab: string) {
    activeTab.value = tab
}
function onSubTab(tab: string) {
    subTab.value = tab
}
</script>


<style lang="less" scoped>
.box{
    height: 250px;
}
</style>